<form #mailConfigFrom="ngForm" class="form">
    <section class="form-block">
        <div class="form-group">
            <label for="mailServer" class="required">{{'CONFIG.MAIL_SERVER' | translate}}</label>
            <label for="mailServer" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="mailServerInput.invalid && (mailServerInput.dirty || mailServerInput.touched)">
                      <input name="mailServer" type="text" #mailServerInput="ngModel" [(ngModel)]="currentConfig.email_host.value" 
                      required 
                      id="mailServer" 
                      size="40" [disabled]="disabled(currentConfig.email_host)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="emailPort" class="required">{{'CONFIG.MAIL_SERVER_PORT' | translate}}</label>
            <label for="emailPort" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="emailPortInput.invalid && (emailPortInput.dirty || emailPortInput.touched)">
                      <input name="emailPort" type="text" #emailPortInput="ngModel" [(ngModel)]="currentConfig.email_port.value" 
                      required 
                      port
                      id="emailPort" 
                      size="40" [disabled]="disabled(currentConfig.email_port)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.PORT_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="emailUsername">{{'CONFIG.MAIL_USERNAME' | translate}}</label>
            <label for="emailUsername" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="false">
                      <input name="emailUsername" type="text" #emailUsernameInput="ngModel" [(ngModel)]="currentConfig.email_username.value" 
                      id="emailUsername" 
                      size="40" [disabled]="disabled(currentConfig.email_username)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="emailPassword">{{'CONFIG.MAIL_PASSWORD' | translate}}</label>
            <label for="emailPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="false">
                      <input name="emailPassword" type="password" #emailPasswordInput="ngModel" [(ngModel)]="currentConfig.email_password.value" 
                      id="emailPassword" 
                      size="40" [disabled]="disabled(currentConfig.email_password)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="emailFrom" class="required">{{'CONFIG.MAIL_FROM' | translate}}</label>
            <label for="emailFrom" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="emailFromInput.invalid && (emailFromInput.dirty || emailFromInput.touched)">
                      <input name="emailFrom" type="text" #emailFromInput="ngModel" [(ngModel)]="currentConfig.email_from.value" 
                      required 
                      id="emailFrom" 
                      size="40" [disabled]="disabled(currentConfig.email_from)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="selfReg">{{'CONFIG.MAIL_SSL' | translate}}</label>
            <clr-checkbox name="emailSSL" id="emailSSL" [(ngModel)]="currentConfig.email_ssl.value" [disabled]="disabled(currentConfig.email_ssl)">
                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
                    <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                    <span class="tooltip-content">{{'CONFIG.SSL_TOOLTIP' | translate}}</span>
                </a>
            </clr-checkbox>
        </div>
        <div class="form-group">
            <label for="insecure">{{'CONFIG.MAIL_INSECURE' | translate}}</label>
            <clr-checkbox name="emaiInsecure" id="emailInsecure" [clrChecked]="!currentConfig.email_insecure.value" [clrDisabled]="disabled(currentConfig.email_insecure)" (clrCheckedChange)="setInsecureValue($event)">
                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
                    <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                    <span class="tooltip-content">{{'CONFIG.INSECURE_TOOLTIP' | translate}}</span>
                 </a>
            </clr-checkbox>
        </div>
    </section>
</form>